<template>
    <div id="song_info">
        <div class="container">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item>
                    <div class="upload-file">
                        <div class="show-img">
                            <img
                                :src="
                                    `${baseUrl}/api/stream/audio?path=${
                                        singerinfo.tblActorPictures ? singerinfo.tblActorPictures[0].filePath : ''
                                    }`
                                "
                                alt=""
                            />
                        </div>
                        <div class="right">
                            <el-form-item label="歌手ID：">
                                <el-input class="w" disabled v-model="singerinfo.externalId"></el-input>
                            </el-form-item>

                            <el-form-item label="歌手名：" prop="name">
                                <el-input class="w" disabled clearable v-model="singerinfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="全拼：">
                                <el-input class="w" disabled clearable v-model="singerinfo.namePinyinFull"></el-input>
                            </el-form-item>

                            <el-form-item label="简拼：">
                                <el-input class="w" disabled clearable v-model="singerinfo.namePinyinShort"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item class="v-form-item">
                    <el-button type="danger">设置专辑状态</el-button>
                    <!-- <el-button type="warning">设置歌曲付费类型</el-button> -->
                </el-form-item>
            </el-form>

            <!-- <div class="handle-box">
                <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div> -->
            <div class="handle-box">
                <!-- <el-button type="primary"  class="handle-del mr10" @click="delAllSelection">批量删除</el-button> -->
                <el-form ref="form" :inline="true" :model="form">
                    <!-- <el-form-item label="专辑ID:">
                        <el-input v-model="query.songId" placeholder="" class="handle-input mr10"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="歌曲名:">
                        <el-input
                            @keyup.native.enter="handleSearch"
                            clearable
                            v-model="query.songName"
                            placeholder=""
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item> -->

                    <el-form-item label="专辑名:">
                        <el-input
                            @keyup.native.enter="handleSearch"
                            clearable
                            v-model="query.importName"
                            placeholder=""
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="UPC:">
                        <el-input
                            @keyup.native.enter="handleSearch"
                            clearable
                            v-model="query.upc"
                            placeholder=""
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="状态:">
                        <el-select v-model="query.status" placeholder="" :clearable="true" class="handle-select mr10">
                            <el-option key="0" label="成功" value="0"></el-option>
                            <el-option key="1" label="失败" value="1"></el-option>
                        </el-select>
                    </el-form-item> -->

                    <el-form-item label="状态:">
                        <el-select
                            @change="handleSearch"
                            v-model="query.status"
                            placeholder=""
                            :clearable="true"
                            class="handle-select mr10"
                        >
                            <el-option key="0" label="下线" :value="0"></el-option>
                            <el-option key="1" label="上线" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button :disabled="disabled" type="primary" @click="handleSearch">
                            <!-- 查询 -->
                            {{ $t('m.queryBtn') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                :data="albumInfoData.content"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="专辑ID" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <!-- <el-table-column label="歌曲名" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.tblActors.name }}</template>
                </el-table-column> -->
                <el-table-column label="专辑名" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column label="拼音名" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.namePinyinFull }}</template>
                </el-table-column>

                <el-table-column label="歌手名" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.tblActors ? scope.row.tblActors.name : '' }}</template>
                </el-table-column>

                <!-- <el-table-column label="评级" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column> -->

                <el-table-column label="UPC" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.upc }}</template>
                </el-table-column>

                <!-- <el-table-column label="CP名称" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.tblCppartner.name }}</template>
                </el-table-column> -->

                <!-- <el-table-column label="风格" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.genre }}</template>
                </el-table-column> -->

                <!-- <el-table-column label="ISRC" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.isrc }}</template>
                </el-table-column> -->

                <el-table-column label="发行时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.releaseDate }}</template>
                </el-table-column>

                <el-table-column width="auto" label="状态" align="center">
                    <template slot-scope="scope">
                        <img
                            v-if="scope.row.status == 1"
                            style="width: 20px;height: 20px;"
                            src="@/assets/images/歌曲管理/u464.png"
                            alt=""
                        />
                        <img
                            v-else-if="scope.row.status == 0"
                            style="width: 20px;height: 20px;"
                            src="@/assets/images/歌曲管理/u468.png"
                            alt=""
                        />
                    </template>
                </el-table-column>

                <!-- <el-table-column label="操作者" align="center">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column> -->

                <el-table-column label="更新时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                </el-table-column>

                <!-- <el-table-column prop="date" label="注册时间"></el-table-column> -->
                <el-table-column label="管理" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">
                            <!-- 编辑 -->
                            {{ $t('m.editBtn') }}
                        </el-button>
                        <!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex + 1"
                    :page-size="query.pageSize"
                    :total="albumInfoData.totalElements"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
// import { fetchData } from '../../api/index';
import { mapActions, mapGetters } from 'vuex';
import { debounce, throttle } from '@/utils/utils.js';
import NProgress from 'nprogress';
export default {
    name: 'AlbumInfo_1',
    data() {
        return {
            disabled: false,
            baseUrl: process.env.VUE_APP_SRC1,
            srcs: ['http://static.xingfeng.cool/images/yww.png'],
            rules: {
                name: [{ required: true, message: '请填写歌手名称', trigger: 'blur' }]
            },
            query: {
                // songName: '',
                importName: '',
                // albumImportName: '',
                // isrc: '',
                status: '',
                pageIndex: 0,
                pageSize: 10
                // songId: '',

                // albumName: '',

                // address: '',
                // name: '',
            },
            // albumInfoData: [
            //     {
            //         id: 1,
            //         name: '张三',
            //         money: 123,
            //         address: '广东省东莞市长安镇',
            //         state: '成功',
            //         date: '2019-11-1',
            //         thumb: 'https://lin-xin.gitee.io/images/post/wms.png',
            //         status: '0'
            //     }
            // ],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {
                // singerId: '5658978',
                // name: '于文文',
                // fullSpell: 'yuwenwen',
                // shortSpell: 'yww'
            }
            // idx: -1,
            // id: -1
        };
    },
    activated() {
        // this.getData();
    },
    watch: {},
    computed: {
        // 写法一
        ...mapGetters(['albumInfoData', 'singerinfo', 'songalbumids', 'songInfoData'])
        // 写法二
        // albumInfoData() {
        //     return this.$store.getters.albumInfoData;
        // },
        // singerinfo() {
        //     return this.$store.getters.singerinfo;
        // }
    },
    methods: {
        ...mapActions(['setAlbumInfoData']),

        async getData() {
            try {
                NProgress.start();
                this.disabled = true;
                let url = '/album/list';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        // ids: this.songalbumids.songIds.join(','),
                        // ids: this.$getAllID(this.songInfoData.content),
                        actorId: this.$route.query.id,
                        // songName: this.query.songName,
                        importName: this.query.importName,
                        // albumImportName: this.query.albumImportName,
                        upc: this.query.upc,
                        status: this.query.status
                    })
                });
                console.log('歌曲列表', res);
                this.setAlbumInfoData(res.data);
                NProgress.done();
                this.disabled = false;
                // this.pageTotal = res.data.totalElements;
            } catch (err) {
                console.log(err);
                NProgress.done();
                this.disabled = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 触发搜索按钮
        // handleSearch() {
        //     this.$set(this.query, 'pageIndex', 0);
        //     this.getData();
        // },
        handleSearch: debounce(function() {
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        }, 300),

        // 删除操作
        // handleDelete(index, row) {
        //     // 二次确认删除
        //     this.$confirm('确定要删除吗？', '提示', {
        //         type: 'warning'
        //     })
        //         .then(() => {
        //             this.$message.success('删除成功');
        //             this.albumInfoData.splice(index, 1);
        //         })
        //         .catch(() => {});
        // },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            let length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            // this.idx = index;
            // this.form = row;
            // this.editVisible = true;

            this.$router.replace({
                path: '/album_3/info_2',
                query: {
                    id: row.id
                }
            });
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.albumInfoData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val - 1);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        }
    }
};
</script>

<style lang="scss">
#song_info {
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        // width: 300px;
        width: 69px;
        height: 28px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .w {
        width: 470px !important;
    }

    .upload-file {
        background: transparent;
        position: relative;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 30% 70%;
        grid-template-rows: 260px;
        align-items: flex-start;
        align-content: flex-start;
        justify-items: left;
        grid-auto-flow: row;
        // margin-bottom: 10px;
        border-bottom: 10px solid rgba(0, 0, 0, 0.1);
        .show-img {
            width: 250px;
            height: 250px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
            }
        }
    }
    .v-form-item {
        .el-form-item__content {
            border-bottom: 10px solid rgba(0, 0, 0, 0.1);
            padding-bottom: 20px;
            box-sizing: border-box;
        }
    }
    .el-form-item__content {
        margin-left: 0 !important;
    }
    .right {
        .el-form-item__content {
            margin-left: 80px !important;
        }
    }
}
</style>
